<template>
  <view>

    <!-- 1 搜索框 -->
<Search></Search>

    <!-- 2 tabs -->
    <u-tabs
      active-color="#eb4450"
      :bar-width="180"
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
    ></u-tabs>

    <!-- 3 tabs内容 条件渲染 -->
    <view class="tab-content">
      <view
        v-for="(item ,index) in  list"
        :key="item.name"
        class="tabs-item"
      >
        <block v-if="current===index">
        <navigator v-for="item1 in goodsList" :key="item1.goods_id" class="goods-item  u-p-10" :url="'/pages/goods_detail/goods_detail?goods_id='+item1.goods_id">
        <u-row>
              <u-col span="4">
                <view class="u-flex u-row-center">
                  <!-- 图片 -->
                  <u-image
                    width="191rpx"
                    height="191rpx"
                   :src='item1.goods_small_logo'
                  ></u-image>
                </view>
              </u-col>
              <u-col span="8">
                <view
                  style="height:191rpx"
                  class="u-flex-col u-row-around"
                >
                  <view class="goods-name">{{item1.goods_name}}</view>
                  <view class="goods-price">￥{{item1.goods_price}}</view>
                </view>
              </u-col>
            </u-row>
            <u-line
              class="u-p-10"
              color="#eee"
            />
     </navigator>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      // 商品列表
      goodsList:[]
    };
  },
  onLoad({cid}){
    //全局变量
    this.params={
    query:'',      //关键字
    pagenum:1 , //页码
   pagesize:10 ,//页码容量
    cid:cid||6  //分类id
}
//  定义总条数
this.total=0
    // 获取商品列表
   this.getgoodsList()
  },

  // 滚动条触底事件onReachBottom    上拉加载下一页数据
  onReachBottom(){
    // 拿到 已加载过的数组长度// this.goodsList.length
    
  // 判断还有没有下一页数据 根据当前已加载的数组的长度和接口返回的数据总条数来判断
    if(this.goodsList.length>=this.total){
      // 没有数据了
      uni.showToast({
        title:'没有更多数据了',
        icon:'none'
      })
    }else{
      // 有就继续加载下一页数据
      this.params.pagenum++  //页码+1
      this.getgoodsList()    //发送请求 
    }
  },
  async onPullDownRefresh(){
         //重置页面数据
         this.goodsList=[] 
          //重置页码         
          this.params.pagenum=1     
          //异步请求获取商品数据
          await this.getgoodsList()  
           //关闭下拉刷新效果
          uni.stopPullDownRefresh() 
  },
  methods: {
    change(index) {
      this.current = index;
    },

    //异步请求获取商品列表
    async getgoodsList(){
     const res=await this.$u.get("/goods/search", this.params)
     console.log(res);
    //  合并条数
     this.goodsList=[...this.goodsList, ...res.goods]
    //  总条数赋值
    this.total=res.total
    }
  },
};
</script>

<style lang="scss">
.goods-name {
  color: #666;
}
.goods-price {
  color: $themeColor;
}
</style>